<template>
    <p>这是一个组件</p>

    <p>{{ msg }}</p>
    <div v-html="spanhtml"></div>

    <p>v-if</p>
    <p v-if="num==0">num为0</p>
    <p v-else-if="num==1">num为1</p>
    <p v-else>num为非0非1</p>
    <button @click="changeNum(0)">num设置为0</button>
    <button @click="changeNum(1)">num设置为1</button>
    <button @click="changeNum(2)">num设置为2</button><br>


    <img :src="imgUrl" >

    <p v-for="(item,index) in arr">item是{{ item }},index是{{ index }}</p>
    <p v-for="(name,value,index) in obj">
        name是{{ name }},value是{{ value }},index是{{ index }}
    </p>

    <h2>配置信息</h2>
    <div>
        <label >昵称</label>
        <input type="text" v-model="user.name">
    </div>
    <div>
        <label >昵称</label>
        <input type="radio" v-model="user.sex" name="sex" value="男">男
        <input type="radio" v-model="user.sex" name="sex" value="女">女
    </div>
    <h2>最新信息</h2>
    <p>昵称是{{ user.name }}</p>
    <p>性别是{{ user.sex }}</p>

    <p>登录</p>
    <input type="text" v-model="username" placeholder="用户名">
    <input type="text" v-model="password" placeholder="密码">
    <p>用户名是{{ username }}</p>
    <p>密码是{{ password }}</p>
</template>

<script>


    export default {
    data(){
        return{
            msg:"hello world",
            spanhtml:"<span>这是一个标签</span>",
            num:0,
            imgUrl :"http://p0.img.360kuai.com/dmfd/320_180_/t01ed7f6dc43a47b3bd.png?size=640x663",
            arr:["吃","喝","拉"],
            obj:{
                a:'吃',
                b:'喝',
                c:'拉'
            },
            user:{
                name:'',
                sex:'',
                wish:''
            },
            username:'',
            password:''
        }
    },
    methods:{
        changeNum(number){
            this.num = number
        }

    }
    
}
</script>